<template>  
  <div class="inspection-upload">  
    <!-- 顶部导航栏 -->  
    <van-nav-bar  
      title="故障申报"  
      left-text="返回"  
      left-arrow  
      @click-left="onBack"  
      right-text="关闭"  
      @click-right="onClose"  
    />  

    <el-form :model="form" label-position="top" label-width="100px">  
      <!-- 内容区域 -->  
      <div class="content">  
        <van-cell-group>  
          <!-- 内容标题 -->  
          <van-cell title="内容标题" is-link>  
            <input type="text" v-model="form.title" />  
          </van-cell>  

          <!-- 申报时间 -->  
          <van-cell title="申报时间" is-link>  
            <span>{{ formattedReportTime }}</span>  
          </van-cell>  

          <!-- 申报位置 -->  
          <van-cell title="申报位置">  
            <el-form-item label="">  
              <span v-if="locationReady" class="grey-text">  
                经度：{{ location.longitude }}，纬度：{{ location.latitude }}  
              </span>  
              <span v-else class="grey-text">  
                正在获取当前位置...  
              </span>  
            </el-form-item>  
            <el-button type="primary" plain size="mini" @click="getLocation">重新获取位置</el-button>  
          </van-cell>  

          <!-- 相关设备 -->  
          <van-cell title="相关设备" is-link>  
            <el-select  
              v-model="form.relatedDevice"  
              placeholder="下拉选择相关设备"  
            >  
              <el-option  
                v-for="device in deviceOptions"  
                :key="device"  
                :label="device"  
                :value="device"  
              ></el-option>  
            </el-select>  
          </van-cell>  

          <!-- 紧急程度 -->  
          <van-cell title="紧急程度" is-link>  
            <el-select  
              v-model="form.urgency"  
              placeholder="下拉选择紧急程度"  
            >  
              <el-option  
                v-for="level in urgencyOptions"  
                :key="level"  
                :label="level"  
                :value="level"  
              ></el-option>  
            </el-select>  
          </van-cell>  
        </van-cell-group>  

        <!-- 现场记录 -->  
        <div class="section">  
          <div class="section-title">  
            现场记录 <span class="note">( 照片自动加水印 )</span>  
          </div>  
          <van-field  
            v-model="form.situation"  
            placeholder="请输入现场情况"  
            rows="3"  
            type="textarea"  
            autosize  
            maxlength="180"  
            show-word-limit  
          />  
          <van-uploader v-model="reportPhotos" :max-count="1" />  
        </div>  

        <!-- 抄送对象 -->  
        <div class="section">  
          <div class="section-title">抄送对象</div>  
          <el-button type="primary" plain @click="openCCTargetDialog">  
            选择抄送对象  
          </el-button>  
          <div class="selected-cc">  
            <span  
              v-for="(person, index) in selectedCC"  
              :key="index"  
              class="selected-person"  
            >  
              {{ person }}  
              <i  
                class="el-icon-close"  
                @click="removePerson(index)"  
              ></i>  
            </span>  
          </div>  
        </div>  

        <!-- 提交按钮 -->  
        <div class="submit-button">  
          <van-button type="primary" block @click="onSubmit">立即提交</van-button>  
        </div>  
      </div>  
    </el-form>  

    <!-- 抄送对象对话框 -->  
    <el-dialog title="选择抄送对象" :visible.sync="ccDialogVisible">  
      <el-form>  
        <el-form-item label="请选择人员">  
          <el-select v-model="form.selectedPerson" placeholder="请选择">  
            <el-option  
              v-for="person in ccOptions"  
              :key="person"  
              :label="person"  
              :value="person"  
            ></el-option>  
          </el-select>  
        </el-form-item>  
      </el-form>  
      <div slot="footer" class="dialog-footer">  
        <el-button @click="ccDialogVisible = false">取消</el-button>  
        <el-button type="primary" @click="confirmCCPerson">确定</el-button>  
      </div>  
    </el-dialog>  
  </div>  
</template> 


<script>  
import {getUser,inspectionRecordUpload,faultDeclaration} from "@/api/wushui/inspection";
export default {  
  data() {  
    return {  
      ccDialogVisible: false,  
      ccOptions: ["张三", "李四", "王五", "赵六"], // 抄送对象选项  
      selectedCC: [],  
      deviceOptions: ["设备A", "设备B", "设备C"], // 相关设备选项  
      urgencyOptions: ["低", "中", "高"], // 紧急程度选项  
      form: {  
        planId:"",
        title: "", // 内容标题  
        reportTime: new Date(), // 申报时间  
        relatedDevice: null, // 相关设备  
        urgency: null, // 紧急程度  
        situation: "", // 现场记录  
        selectedPerson: null ,
      },  
      location: {  
        latitude: null,  
        longitude: null,  
      },  
      locationReady: false,  
      reportPhotos: [],  
    };  
  },  
   computed: {  
    formattedReportTime() {  

      // 格式化当前时间为字符串  
      return this.form.reportTime  
        ? this.form.reportTime.toISOString().slice(0, 19).replace('T', ' ')  
        : '';  
    },  
  },  
  mounted() {  
    const { planId } = this.$route.query;  
    this.form.planId = planId;
  }  ,
  methods: {  
    openCCTargetDialog() {  
      this.ccDialogVisible = true;  
    },  
    confirmCCPerson() {  
      if (this.form.selectedPerson && !this.selectedCC.includes(this.form.selectedPerson)) {  
        this.selectedCC.push(this.form.selectedPerson);  
      }  
      this.form.selectedPerson = null;  
      this.ccDialogVisible = false;  
    },  
    removePerson(index) {  
      this.selectedCC.splice(index, 1);  
    },  
    getLocation() {  
      if (navigator.geolocation) {  
        this.locationReady = false;  
        navigator.geolocation.getCurrentPosition(  
          (position) => {  
            const { latitude, longitude } = position.coords;  
            this.location = { latitude, longitude };  
            this.locationReady = true;  
          },  
          () => {  
            this.$message.error("获取位置信息失败");  
          }  
        );  
      } else {  
        this.$message.error("当前设备不支持地理定位");  
      }  
    },  
    onTimeChange(value) {  
      console.log("选择的时间为:", value);  
    },  
    onSubmit() {  
      event.preventDefault();
      console.log(this.form)
       faultDeclaration(this.form).then((response) => {
          console.log(response)
          if(response.code == 200 ){
             this.$message({ message: '上传成功!', type: 'success',  duration: 1000, // 提示持续时间（毫秒）  
                onClose: () => {  
                    this.$router.push({ path: '/inspection' }); // 在提示关闭后跳转  
                }  
            });  
             
          }
        }).catch(() => {
          this.$message.error("获取数据失败");
        });  

    },  
    onBack() {  
      this.$router.go(-1);  
    },  
    onClose() {  
      this.$router.push("/home");  
    },  
  },  
};  
</script>  

<style scoped>  
/* 父容器样式 */  
.inspection-upload {  
  background-color: #f4f4f4;  
  min-height: 100vh;  
}  

/* 顶部导航栏 */  
.van-nav-bar {  
  position: sticky;  
  top: 0;  
  z-index: 10;  
  background-color: #ffffff;  
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);  
}  

/* 内容区域 */  
.content {  
  padding: 16px;  
}  

/* 小节区域背景 */  
.section {  
  margin: 16px 0;  
  padding: 12px;  
  background: #ffffff;  
  border-radius: 8px;  
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);  
}  

/* 小节标题 */  
.section-title {  
  font-size: 16px;  
  font-weight: bold;  
  margin-bottom: 10px;  
}  

/* 提示文字 */  
.note {  
  font-size: 12px;  
  color: #999;  
}  

/* 灰色文字 */  
.grey-text {  
  color: #888;  
}  

/* 抄送对象样式 */  
.selected-person {  
  display: inline-block;  
  margin-right: 5px;  
  padding: 2px 8px;  
  background-color: #f0f0f0;  
  border: 1px solid #dcdcdc;  
  border-radius: 4px;  
  position: relative;  
}  

.selected-person .el-icon-close {  
  margin-left: 5px;  
  cursor: pointer;  
}  

/* 对话框底部 */  
.dialog-footer {  
  text-align: right;  
}  

/* 提交按钮 */  
.submit-button {  
  margin-top: 24px;  
}  
</style>  